<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>叔叔生誕2018</title>
    <!--

    「やっはろー！私の誕生日を祝ってくれてありがとう！」
    「これからも『やはり俺の青春ラブコメはまちがっている。』』を応援よろしくね！」
    
    Designed by yui540.

    -->
    <meta name="description" content="『ありがと...バカ』">
    <meta name="keywords" content="由比ヶ浜結衣,yui540,俺ガイル,やはり俺の青春ラブコメはまちがっている">
    <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">
    <meta property="og:url" content="https://yui.magical-girl.site">
    <meta property="og:image" content="https://yui.magical-girl.site/images/ogp.png">
    <meta property="og:type" content="website">
    <meta property="og:title" content="叔叔生誕2018 ">
    <meta property="og:site_name" content="yui.magical-girl.site">
    <meta property="og:description" content="『ありがと...バカ』">
    <meta property="og:locale" content="ja_JP">
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="https://yui.magical-girl.site" />
    <meta name="twitter:title" content="叔叔生誕2018 " />
    <meta name="twitter:description" content="『ありがと...バカ』" />
    <meta name="twitter:image" content="https://yui.magical-girl.site/images/ogp.png" />
    <meta name="theme-color" content="#B56E96">
    <link rel="manifest" href="/manifest.json" />
    <link rel="shortcut icon" href="https://yui.magical-girl.site/images/favicon.ico" />
    <link rel="apple-touch-icon" href="https://yui.magical-girl.site/images/icons/icon.png" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
    <link rel="stylesheet" href="./stylesheets/font.css" />
    <link rel="stylesheet" href="./stylesheets/style.css" />
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-53682384-9"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-53682384-9');
    </script>
    <script>
      if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./sw.js').then(() => {})
      }
    </script>
  </head>
  <body>
    <main id="root">
      <!--*********************************** load-view **************************************-->
      <div class="load-view">
        <div class="load-view__bg">
          <div class="inner">
            <div></div><div></div><div></div><div></div>
          </div>
        </div>
        <div class="load-view__progress-bar">
          <img class="icon" src="./images/load-view/load-icon12.png" alt="ロードアイコン" />
          <div class="progress-bar"><div></div></div>
        </div>
        <div class="load-view__windmill">
          <div></div><div></div>
        </div>
        <div class="load-view__words">
          <div class="word"></div>
          <div class="word"></div>
          <div class="word"></div>
          <div class="word"></div>
          <div class="word"></div>
        </div>
     
        <div class="load-view__end">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <!-- <img class="char-name" src="./images/load-view/char-name.svg" alt="由比ヶ浜結衣" /> -->
        </div>
      </div>
      <!--*********************************** motion-part1 **************************************-->
      <div class="motion-part1">
        <div class="motion-part1__text motion-part1__text_type_1">
          <div></div><div></div><div></div><div></div>
        </div>
        <div class="motion-part1__text motion-part1__text_type_2">
          <div></div><div></div><div></div><div></div>
        </div>
        <img class="motion-part1__char"
          src="./images/motion-part1/kushui1.png"
          alt="由比ヶ浜結衣"
        />
        <!-- <img class="motion-part1__char-name"
          src="./images/motion-part1/name.svg"
          alt="由比ヶ浜結衣"
        /> -->
        <div class="motion-part1__end">
          <div class="color-ball color-ball-pink"></div>
          <div class="color-ball color-ball-blue"></div>
          <div class="color-ball color-ball-yellow"></div>
          <div class="color-ball color-ball-purple"></div>
          <img class="say"
            src="./images/motion-part1/say.svg"
            alt="....ありがと、バカ"
          />
          <div class="color-bg"></div>
          <div class="color-ball color-ball-white"></div>
        </div>
      </div>
      <!--*********************************** motion-part2 **************************************-->
      <div class="motion-part2">
        <div class="motion-part2__bg">
          <div></div><div></div><div></div>
        </div>
        <div class="motion-part2__scense motion-part2__scense_type_1">
          <div class="char"></div>
          <img class="say"
            src="./images/motion-part2/say/1.svg"
            alt="私の大切な場所、守ってくれた"
          />
        </div>
        <div class="motion-part2__scense motion-part2__scense_type_2">
          <div class="char"></div>
          <img class="say"
            src="./images/motion-part2/say/2.svg"
            alt="好き...なの"
          />
        </div>
        <div class="motion-part2__paint motion-part2__paint_type_1">
          <div></div><div></div><div></div><div></div>
        </div>
        <div class="motion-part2__paint motion-part2__paint_type_2">
          <div></div><div></div><div></div><div></div>
        </div>
        <div class="motion-part2__end">
          <div></div><div></div><div></div>
        </div>
      </div>
      <!--*********************************** top-page **************************************-->
      <article class="top-page">
        <div class="top-page__bg"></div>
        <div class="top-page__frame top-page__frame_type_1"></div>
        <div class="top-page__yui"></div>
        <div class="top-page__frame top-page__frame_type_2"></div>
        <div class="top-page__happy-birthday">
          <img src="./images/top-page/happy-birthday42.png" alt="HAPPY BIRTHDAY YUI" />
        </div>
        <div class="top-page__eye"></div>
        
      </article>
      <!--*********************************** other-page **************************************-->
      <div class="other-page">
        <div class="page">
          <div class="close-btn"></div>
          <section class="developer-page">
            <div class="inner">
              <h2 class="title">
                <img src="./images/developer-page/label/1.svg" alt="サイト製作者" />
              </h2>
              <img class="icon" src="./images/yui540.png" alt="yui540" />
              <h4 class="name">yui540</h4>
              <p class="description">
                通う理由がなくなり専門学校を退学したニート（21歳）。<br />
                好きなお菓子はポッキーで、好きなVTuberはミライアカリで、推しキャラは由比ヶ浜結衣である。<br />
                6/18が由比ヶ浜結衣の誕生日ということを今更知る。<br />
                そして、由比ヶ浜結衣生誕2018非公式サイトを急いで立ち上げた。
              </p>
              <div class="sns-box">
                <a class="fab fa-twitter" target="_blank" href="https://twitter.com/yui540"></a>
                <a class="fab fa-github" target="_blank" href="https://github.com/yui540"></a>
                <a class="fas fa-globe" target="_blank" href="https://magical-girl.site"></a>
              </div>
              <h2 class="title">
                <img src="./images/developer-page/label/2.svg" alt="支援者" />
              </h2>
              <p class="description">
                pixivFANBOXにて、僕を支援してくださった方々です。<br />
                支援者の方々にこの場を使って、お礼させていただきます。<br />
                ありがとうございました！！！
              </p>
              <div class="supporter-box">
                <p><strong>sachin21</strong><span>様</span></p>
                <p><strong>わたすけ</strong><span>様</span></p>
                <p><strong>うなすけ</strong><span>様</span></p>
                <p><strong>at</strong><span>様</span></p>
                <p><strong>きりみんちゃん</strong><span>様</span></p>
                <p><strong>kyorohiro</strong><span>様</span></p>
                <p><strong>takanorip</strong><span>様</span></p>
                <p><strong>ましろ</strong><span>様</span></p>
                <p><strong>SAI</strong><span>様</span></p>
                <p><strong>ケイタ</strong><span>様</span></p>
                <p><strong>ねりけし</strong><span>様</span></p>
                <p><strong>masaoblue</strong><span>様</span></p>
              </div>
            </div>
          </section>
          <section class="gallery-page">
            <div class="inner">
              <h2 class="title">
                <img src="./images/gallery-page/title.svg" alt="ギャラリー" />
              </h2>
              <p class="description">
                このサイトを製作中に作った宣伝用の画像です。<br />
                自由に使っていただいて大丈夫なので、<br />
                画像をツイートするなどして由比ヶ浜結衣の誕生日をお祝いしていただけると幸いです。
              </p>
              <div class="img-box">
                <a class="img" target="_blank" href="./images/gallery-page/1.png"></a>
                <a class="img" target="_blank" href="./images/gallery-page/2.png"></a>
                <a class="img" target="_blank" href="./images/gallery-page/3.png"></a>
                <a class="img" target="_blank" href="./images/gallery-page/4.png"></a>
              </div>
            </div>
          </section>
        </div>
      </div>
    </main>
    <script src="./scripts/app.min.js"></script>
  </body>
</html>
